feat: New Dark Scheme Part 2 #3317

alifafaruk · 2020-04-24T21:02:45Z

Dark mode support
fixes #2407

@lucasortizny @Jen-Lopez and I worked on the dark mode feature for the website. We implemented a toggle button, where the user can turn dark mode on/off. We did a pull request earlier, but it had multiple merge conflicts that we weren't able to fix. So we closed that. We fixed the issues on our end and now it works!

…or darkMode functionality

stephanegigandet · 2020-05-03T13:42:48Z

Hi @alifafaruk ! Thank you for the PR!

The dark mode looks very good, but instead of adding a site specific toggle, I think it would make much more sense to just use the CSS prefers-color-scheme, as @teolemon suggested in the bug #2407

That way we can avoid the 2 javascript scripts that will block the page rendering for all users until they load, and we can have a pure CSS solution.

Also it would be great to put the CSS styles inside the SCSS ( in the /scss/ directory) so that they get processed along with the rest of the CSS styles.

cc @hangy

teolemon · 2020-05-03T13:52:54Z

Here's the Open Food Facts logo in dark mode: https://github.com/openfoodfacts/openfoodfacts-server/blob/3d1a30516a663d1dedad0733fac66d9d93a249c8/html/images/misc/openfoodfacts-logo-no-tagline-dark-mode.svg

GendelfLugansk · 2020-05-03T13:59:32Z

html/js/darkMode.js

@@ -0,0 +1,30 @@
+var stylesheet = document.styleSheets[3]; // dark-mode stylesheet


This line of code is unrealible because order of stylesheets might be different on different pages and changed by newer code changes. If you want to use document.styleSheets, at least use title attribute, like shown in first example here

GendelfLugansk · 2020-05-03T14:00:14Z

html/js/preDarkMode.js

+// Before page renders, check if page is in darkmode.
+// Otherwise, it will load regular styles before dark style.
+let dark = localStorage.getItem('darkMode');
+var sheet = document.styleSheets[3];


The same issue as in darkMode.js

GendelfLugansk · 2020-05-03T14:10:54Z

It seems like prefers-color-scheme requires user to activate dark theme on OS level. Correct me if I'm wrong. In this case I'm not sure if it's better

cc @stephanegigandet @teolemon @hangy

GendelfLugansk · 2020-05-03T15:11:51Z

Also, it seems like it might be possible to share "dark mode" setting across different domains but this might be complex to implement. I think that would require changes to perl code, docker config and nginx/apache config on production site. I don't have perl expertise to give more detailed advice.

hangy · 2020-05-03T16:07:40Z

It seems like prefers-color-scheme requires user to activate dark theme on OS level. Correct me if I'm wrong. In this case I'm not sure if it's better

It sounds like a good idea to default to the dark mode, if someone has selected it, though. This guide explains that the media query can also be done from JS.

Also, it seems like it might be possible to share "dark mode" setting across different domains but this might be complex to implement. I think that would require changes to perl code, docker config and nginx/apache config on production site.

Changing some JavaScript should suffice, if I understand the blog post correctly. However, I wonder if we need localStorage for this. To no waste too much cookie storage, one could just set a d=1 cookie to store enabled/changed dark mode setting in a cross-subdomain cookie.

html/js/darkMode.js

hangy

Could you also add the new JS/CSS files to gulpfile.js and then include them from the dist/js/dist/css directory, so that we can load the minified versions?

hangy · 2020-05-03T16:15:23Z

lib/ProductOpener/Display.pm

@@ -6090,7 +6090,13 @@ $options{favicons}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous">
 <link rel="search" href="$formatted_subdomain/cgi/opensearch.pl" type="application/opensearchdescription+xml" title="$Lang{site_name}{$lang}">
 $header
+<!-- Dark Mode -->
+<link rel="stylesheet" href="$static_subdomain/css/darkMode.css">


This basically makes dark mode the default - Might introduce unwanted behaviour if JavaScript is disabled. cc @stephanegigandet

Dark mode should not be the default.

I didn't test in all browsers but in Chromium adding disabled="true" to link disables stylesheet. I think this should work in other browsers as well. JS code of this PR is based on disabled property and MDN says it's supported everywhere except IE (support is unknown)

I didn't test in all browsers but in Chromium adding disabled="true" to link disables stylesheet. I think this should work in other browsers as well. JS code of this PR is based on disabled property and MDN says it's supported everywhere except IE (support is unknown)

Right, but there are some extensions that completely disable Javascript execution. In that case dark mode would be the default. Consider adding disabled="true" here and changing it in JS.

stephanegigandet · 2020-05-04T17:25:38Z

It seems like prefers-color-scheme requires user to activate dark theme on OS level. Correct me if I'm wrong. In this case I'm not sure if it's better

I don't know either. Is there some research on dark mode users? Do they turn it on or off depending on ambient light? Does it make sense to turn it on and off depending on the web sites users visit?

I was under the impression that it was more of a "global" preference that is valid accross sites and times: you either want dark mode all the time, or you don't. So you set it once in the OS preference, and then hopefully web sites have styles that match your preference.

GendelfLugansk · 2020-05-04T17:45:23Z

I was under the impression that it was more of a "global" preference that is valid accross sites and times: you either want dark mode all the time, or you don't. So you set it once in the OS preference, and then hopefully web sites have styles that match your preference.

The thing is, when I google "Chrome dark mode", I see this article which implies that dark mode is supported only in Win 10+ and MacOS 10.14+. As Ubuntu 18.04 user, I don't think I can enable it. So for various Linux users toggle might be useful. Toggle can be combined with prefers-color-scheme, as was suggested above

VaiTon · 2020-05-09T12:04:02Z

The thing is, when I google "Chrome dark mode", I see this article which implies that dark mode is supported only in Win 10+ and MacOS 10.14+. As Ubuntu 18.04 user, I don't think I can enable it. So for various Linux users toggle might be useful. Toggle can be combined with prefers-color-scheme, as was suggested above

I agree. Other sites (eg. stackoverflow, youtube, etc.) are using a site-specific switch and eventually we could add the "system settings" one.

alifafaruk · 2020-05-09T23:32:24Z

Hi all! Thank you for taking the time to look into the pull request. My group (@Jen-Lopez and @lucasortizny) and I are new to web development and are unfamiliar with the mechanics of how to implement a prefers-color-scheme. We will be fixing the CSS to fix the bugs.

stephanegigandet · 2020-05-28T12:11:59Z

Hi Everyone, just wondering if there is still some work being done / to do on this PR?

teolemon · 2020-06-01T09:38:10Z

poke @alifafaruk @VaiTon

VaiTon · 2020-06-01T18:08:38Z

poke @alifafaruk @VaiTon

Cannot push to branch :)

alifafaruk · 2020-06-01T18:26:17Z

Hi, we fixed all the style changes requested for dark mode. We also fixed bugs that were present. However, we don't know how to implement "prefers-color-scheme," so the method used to implement dark mode is still a toggle. If someone could help us change it to a "prefers-color-scheme" method, that would be great!

GendelfLugansk · 2020-06-01T19:44:31Z

This is still an issue:

"Android apk" is still unreadable:

Not sure about this wide border around each tag (if others are ok with it, it's fine with me):

This is still an issue (go to "Charts and maps", choose "Energy" for horizontal axis and click "generate graph"):

GendelfLugansk · 2020-06-01T19:49:38Z

lib/ProductOpener/Display.pm

@@ -6090,7 +6090,13 @@ $options{favicons}
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" integrity="sha256-FdatTf20PQr/rWg+cAKfl6j4/IY3oohFAJ7gVC3M34E=" crossorigin="anonymous">
 <link rel="search" href="$formatted_subdomain/cgi/opensearch.pl" type="application/opensearchdescription+xml" title="$Lang{site_name}{$lang}">
 $header
+<!-- Dark Mode -->
+<link rel="stylesheet" href="$static_subdomain/css/darkMode.css">


Add disabled="true" to link tag

teolemon · 2020-06-16T13:12:58Z

Good news, the dark mode compatible APK logo is merged, and available in prod

Outdated

GendelfLugansk

Some parts are hard to read

This on the left, when user is logged in:

This is the bottom of page:

This light block (can be found at http://world.productopener.localhost/category/dairies):

Also, edit page (i.e. http://world.productopener.localhost/cgi/product.pl?type=edit&code=3908801793077) has a lot of light-colored blocks:

Everything else looks good to me

Jen-Lopez · 2020-07-27T17:59:58Z

I fixed the "Edit a Product" Page and went throughout the site to fix more css bugs. Since the new Android image is available in production and is dark mode aware, this issue should be resolved. However, I was unable to fix the floating WebLinks block in "dairies" since there is no id/class associated with it to change the styling. What page should I look at to add an ID to the element? Also, if there are any changes to be made or any suggestions, please let me know.

sonarcloud · 2020-07-27T21:00:34Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities (and 0 Security Hotspots to review)
0 Code Smells

No Coverage information
0.0% Duplication

teolemon · 2020-08-26T11:25:01Z

This PR has merge conflicts.

CloCkWeRX · 2022-03-21T11:26:10Z

TODO items

Android APK - Anyone able to do a revised version of https://static.openfoodfacts.org/images/misc/android-apk.svg ?

Weblinks - is this just

openfoodfacts-server/lib/ProductOpener/Display.pm

Line 3255 in ec77a78

    
           $weblinks_html .= '<div class="weblinks" style="float:right;width:300px;margin-left:20px;margin-bottom:20px;padding:10px;border:1px solid #cbe7ff;background-color:#f0f8ff;"><h3>' . lang('tag_weblinks') . '</h3><ul>';

with inline styles that should be pulled up to a main stylesheet?

Tabs - ```ul.tabs {
border-top: 1px solid #ccc;
background-color: #efefef;
}```` ?

CloCkWeRX · 2022-03-21T11:48:43Z

Did a dark friendly (and light friendly) revamp of the logo

teolemon · 2022-10-11T12:48:46Z

We just deployed a new design, but without dark mode so far.

stephanegigandet · 2022-12-09T16:42:56Z

We deployed a redesign of the https://world.openfoodfacts.org website, so sadly we won't be able to deploy this PR.
Sorry about that and thank you for your work @alifafaruk @lucasortizny and @Jen-Lopez .

Jen and others added 5 commits April 24, 2020 15:53

implemented js, linked js to html, created css files

be123c7

implemented js, linked js to html, created css files

3fbd768

new docs

27a226d

Finished all updates to darkMode.css and minor change to Display.pm f…

6fcf99c

…or darkMode functionality

Made the Dark Toggle

b312a7e

GendelfLugansk requested changes May 3, 2020

View reviewed changes

This comment has been minimized.

Sign in to view

hangy reviewed May 3, 2020

View reviewed changes

html/js/darkMode.js Outdated Show resolved Hide resolved

hangy reviewed May 3, 2020

View reviewed changes

teolemon added CSS 🎨 Design foundation Foundation is the CSS framework of Open Food Facts. HTML labels May 10, 2020

alifafaruk and others added 2 commits May 16, 2020 01:33

Mades design changes to darkMode.css and fixed some bugs

e80dc0b

new style changes

5854d5d

GendelfLugansk previously requested changes Jun 1, 2020

View reviewed changes

fixed chart color

3f7fca1

teolemon added the Dark mode label Jun 22, 2020

teolemon requested review from GendelfLugansk and hangy July 15, 2020 20:32

GendelfLugansk requested changes Jul 16, 2020

View reviewed changes

hangy mentioned this pull request Jul 21, 2020

feat: Make some images aware of dark mode #3911

Closed

Jen added 3 commits July 25, 2020 21:45

Update branch with remote changes

d11970a

fixed css throughout site

87e5567

fixed css error

2b0fdd3

hangy mentioned this pull request Jul 27, 2020

Add a CSS class for weblinks #3952

Merged

Jen added 2 commits July 27, 2020 16:44

update branch

64770d1

fixed web links box

6fd0a3f

hangy mentioned this pull request Jul 30, 2020

feat: integration of the "tuttifrutti" website into cgi/graph #3957

Closed

teolemon added the 💥 Merge Conflicts 💥 Merge Conflicts label Aug 26, 2020

This was referenced Aug 21, 2021

🎨 Look & Feel - Design (Tracker) #5513

Open

NEW DESIGN - Dark mode support #2407

Open

teolemon changed the title ~~New Dark Scheme Part 2~~ feat: New Dark Scheme Part 2 Feb 14, 2022

teolemon assigned alifafaruk Apr 28, 2022

github-actions bot added the ⭐ top pull request Top pull request. label Sep 20, 2022

github-actions bot mentioned this pull request Sep 20, 2022

👍 Top Issues Dashboard #7374

Open

stephanegigandet closed this Dec 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: New Dark Scheme Part 2 #3317

feat: New Dark Scheme Part 2 #3317

alifafaruk commented Apr 24, 2020 •

edited by teolemon

Loading

stephanegigandet commented May 3, 2020

teolemon commented May 3, 2020

GendelfLugansk May 3, 2020

GendelfLugansk May 3, 2020

GendelfLugansk commented May 3, 2020

This comment has been minimized.

GendelfLugansk commented May 3, 2020

hangy commented May 3, 2020

hangy left a comment

hangy May 3, 2020

stephanegigandet May 4, 2020

GendelfLugansk May 4, 2020 •

edited

Loading

VaiTon May 9, 2020

stephanegigandet commented May 4, 2020

GendelfLugansk commented May 4, 2020

VaiTon commented May 9, 2020

alifafaruk commented May 9, 2020

stephanegigandet commented May 28, 2020

teolemon commented Jun 1, 2020

VaiTon commented Jun 1, 2020

alifafaruk commented Jun 1, 2020

GendelfLugansk commented Jun 1, 2020

GendelfLugansk Jun 1, 2020

teolemon commented Jun 16, 2020

GendelfLugansk left a comment

Jen-Lopez commented Jul 27, 2020

sonarcloud bot commented Jul 27, 2020

teolemon commented Aug 26, 2020

CloCkWeRX commented Mar 21, 2022

CloCkWeRX commented Mar 21, 2022

teolemon commented Oct 11, 2022

stephanegigandet commented Dec 9, 2022

		@@ -0,0 +1,30 @@
		var stylesheet = document.styleSheets[3]; // dark-mode stylesheet

feat: New Dark Scheme Part 2 #3317

feat: New Dark Scheme Part 2 #3317

Conversation

alifafaruk commented Apr 24, 2020 • edited by teolemon Loading

stephanegigandet commented May 3, 2020

teolemon commented May 3, 2020

GendelfLugansk May 3, 2020

Choose a reason for hiding this comment

GendelfLugansk May 3, 2020

Choose a reason for hiding this comment

GendelfLugansk commented May 3, 2020

This comment has been minimized.

GendelfLugansk commented May 3, 2020

hangy commented May 3, 2020

hangy left a comment

Choose a reason for hiding this comment

hangy May 3, 2020

Choose a reason for hiding this comment

stephanegigandet May 4, 2020

Choose a reason for hiding this comment

GendelfLugansk May 4, 2020 • edited Loading

Choose a reason for hiding this comment

VaiTon May 9, 2020

Choose a reason for hiding this comment

stephanegigandet commented May 4, 2020

GendelfLugansk commented May 4, 2020

VaiTon commented May 9, 2020

alifafaruk commented May 9, 2020

stephanegigandet commented May 28, 2020

teolemon commented Jun 1, 2020

VaiTon commented Jun 1, 2020

alifafaruk commented Jun 1, 2020

GendelfLugansk commented Jun 1, 2020

GendelfLugansk Jun 1, 2020

Choose a reason for hiding this comment

teolemon commented Jun 16, 2020

GendelfLugansk left a comment

Choose a reason for hiding this comment

Jen-Lopez commented Jul 27, 2020

sonarcloud bot commented Jul 27, 2020

teolemon commented Aug 26, 2020

CloCkWeRX commented Mar 21, 2022

CloCkWeRX commented Mar 21, 2022

teolemon commented Oct 11, 2022

stephanegigandet commented Dec 9, 2022

alifafaruk commented Apr 24, 2020 •

edited by teolemon

Loading

GendelfLugansk May 4, 2020 •

edited

Loading